<template>
  <div class="notification-card flex-center column " @click="onCardClicked">
    <div class="title">{{ card.title }}</div>
    <div class="content">
      <ul class="content-list flex-center column">
        <li
          class="list-item flexbox justify-center align-start"
          v-for="(item, i) of contentList"
          :key="i"
          v-show="item.show !== false"
          :style="{
        }"
        >
          <!-- 'font-size': item.fontSize + 'px', -->
          <!-- 'text-align': item.align, -->
          <!-- 'color': item.color, -->
          <div class="key">{{ item.explain }}</div>
          <div class="value" :style="{
            color: '#' + (item.color || '000000')
          }">{{ item.value }}</div>
        </li>
      </ul>
    </div>
    <!-- <div class="action flexbox justify-between align-center">
      <div>查看详情</div>
      <div>
          <i class="fa fa-angle-right"></i>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import MessageMixin from "@/mixins";
import { MsgTypeKV } from '@/api/socket/imClient';
import { formPost } from '@/utils/common';

declare const $Vue: Vue;

@Component<NotificationCommon>({
  mixins: [MessageMixin]
})
export default class NotificationCommon extends Vue {

  @Prop({})
  card: any;

  private eventList: Array<any> = ['$clickShareCard'];

  private get contentList() {
    try {
      return JSON.parse(this.card.context);
    } catch (err) {
      return [];
    }
  }

  protected mounted() {
    // this.initEvents(this.eventList);
  }

  private onCardClicked() {
    // window.location.href = this.card.url;

  }

  private $clickShareCard(data: any) {
    // if (data.result === 0) {
    //   formPost(data.targetUrl, data.param);
    // } else {
    //   this.$createToast({
    //     txt: data.message,
    //     type: "warn",
    //     time: 3000
    //   }).show();
    // }
  }
}
</script>

<style lang="stylus" scoped>
.notification-card
  border-radius 8px 
  background white 
  padding 4px
  box-shadow 0 0 2px 4px #eee
  width 100%
  .title
    font-size 18px 
    text-align left
    padding 10px 
    width 100%

.content 
  width 100%

.content-list
  width 100%

.list-item 
  width 100% 
  line-height 20px 
  font-size 16px 
  margin 4px 0
  .key 
    flex-basis 20% 
    width 20% 
    color #909090
    padding 2px
    text-align left
  .value 
    padding 2px
    flex-basis 80%
    width 80%
    color #101010 
    text-align left
    padding-left 8px
    box-sizing border-box

.action 
  border-top 0.8px solid #eee
  width 100% 
  height 36px 
  line-height 36px 
  text-align left

</style>

